<template>
  <div>
    <div>
      <el-dialog title="选择类型" width="250px" @close='closeAddOneDialog' :visible.sync="AddOneDialogVisible"
        append-to-body>

        <el-form>
          <el-form-item size="large">
            <el-input v-model="addNodeName" placeholder="组件名称" :style="{width: '100%'}"></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-select v-model="selectedType" placeholder="请选择类型" @change="selectedTypeChange" :disabled="selectedTypeisenable">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item size="large">
            <el-button style="float:center;" mc-type="column-el-button" size="normal" type="primary" @click="addOneConfirm()">确定
            </el-button>

          </el-form-item>

        </el-form>
      </el-dialog>


      <el-dialog title="调试结果" width="1850px" @close='closedebugResultDialog' :visible.sync="debugResultDialogVisible"
        append-to-body>
        <el-table :data="debugResultData" style="width: 100%">
          <el-table-column label="请求url" prop="url" width='200px'>
          </el-table-column>
          <el-table-column label="消息头" prop="headers">
          </el-table-column>
          <el-table-column label="body" prop="body">
          </el-table-column>
          <el-table-column label="返回结果" prop="response" width='1000px'>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>

    <div>
      <el-container>
        <el-header>
          <el-button type="danger" @click="completeanddebug">调试</el-button>
          <el-button type="primary" @click="completeandcreate">完成</el-button>


        </el-header>

        <el-container style="background-color: rgb(238, 241, 246);height: 900px; border: 1px solid #eee">

          <el-aside width="300px" style="background-color: rgb(238, 241, 246)">
            <el-tree :data="treeData" node-key="id" default-expand-all highlight-current :expand-on-click-node="false"
              draggable @node-drop="handleDrop" @node-click="handleNodeClick">

              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>
                 <i v-show="data.nodeType=='根节点'||data.nodeType=='仅一次处理器'" class="el-icon-folder-opened"/>
                 <i v-show="data.nodeType=='http请求'" class="el-icon-edit"/>
                 <i v-show="data.nodeType=='http请求默认值'" class="el-icon-setting"/>
                {{ data.nodeName }} </span>

                <el-button  type="text" size="mini" @click="() => addTree(data.id)">添加</el-button>



                <el-popconfirm title="确定要删除？" @confirm="remove(node, data)" v-show="data.nodeType!='根节点'">

                  <el-button type="text" size="mini" slot="reference">删除</el-button>

                </el-popconfirm>

                <el-button type="text" size="mini" @click="() => editTree(data)">编辑</el-button>

              </span>
            </el-tree>

          </el-aside>
          <el-main>
            <el-row :gutter="0" v-if="ishttpsampler">
              <el-form label-width="150px" ref="addTaskForm">


                  <el-row :gutter="0">
                <el-col :span="6">
                  <el-form-item label="协议类型(http/https)">
                    <el-input v-model="addTaskForm.httpType" placeholder="请求类型(http/https)" style="width: 150px;">
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="ip" >
                    <el-input v-model="addTaskForm.ip" placeholder="ip" style="width: 150px;" >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="端口">
                    <el-input v-model="addTaskForm.port" placeholder="端口" style="width: 120px;">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>


                <div v-if="!ishttpDefaults">

                  <el-col :span="19">
                    <el-form-item label="请求方式">
                      <el-input v-model="addTaskForm.requestMethod" placeholder="请求方式(post/get等)" :style="{width: '100%'}">
                      </el-input>
                    </el-form-item>
                  </el-col>



                  <el-col :span="19">
                    <el-form-item label="脚本url">
                      <el-input v-model="addTaskForm.url" placeholder="脚本url" :style="{width: '100%'}">
                      </el-input>
                    </el-form-item>
                  </el-col>





                  <el-col :span="19">
                    <el-form-item label="body">
                      <el-input v-model="addTaskForm.body" placeholder="请求体" :style="{width: '100%'}"
                      type="textarea"
                        :rows="5"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>



                  <el-col :span="19">
                    <el-form-item label="cookies">
                      <el-input v-model="addTaskForm.cookies" placeholder="cookies" :style="{width: '100%'}">
                      </el-input>
                    </el-form-item>
                  </el-col>


                  <el-col :span="19">
                    <el-form-item label="headers">
                      <el-input v-model="addTaskForm.headers" placeholder="headers" :style="{width: '100%'}">
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="19">
                    <el-form-item label="exp">
                      <el-input v-model="addTaskForm.exp" placeholder="预期" :style="{width: '100%'}">
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="19">
                    <el-form-item label="前置脚本">
                    <CodeEdit v-model="addTaskForm.preshell" />
                    </el-form-item>



                  </el-col>

                  <el-col :span="19">
                    <el-form-item label="最后前置脚本">
               <!--       <el-input v-model="addTaskForm.lastpreshell" placeholder="最后前置脚本" :style="{width: '100%'}"
                      type="textarea"
                        :rows="5"
                      >
                      </el-input> -->
                       <CodeEdit v-model="addTaskForm.lastpreshell" />
                    </el-form-item>
                  </el-col>


                  <el-col :span="19">
                    <el-form-item label="后置脚本">
             <!--         <el-input v-model="addTaskForm.postshell" placeholder="后置脚本" :style="{width: '100%'}"
                      type="textarea"
                        :rows="5"
                      >
                      </el-input> -->
                      <CodeEdit v-model="addTaskForm.postshell" />
                    </el-form-item>
                  </el-col>

                </div>
                <!--
                <el-col :span="19">
                  <el-form-item label="请求接口名称">
                    <el-input v-model="addTaskForm.apiName" placeholder="请求接口名称" :style="{width: '100%'}">
                    </el-input>
                  </el-form-item>
                </el-col>
 -->


                <el-col :span="19">
                  <el-form-item size="large">
                    <el-button type="primary" @click="submitFormTree">保存</el-button>

                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>

            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="closekeywordWindow">关闭</el-button>
            </span>
          </el-main>

        </el-container>

      </el-container>






    </div>
  </div>
</template>

<script>
  import {

    postgettasktreebyid,
    postaddtree,
    postdeltree,
    postgetonetreedetail,
    postperformanceaddTask,
    postperformancedetailsbyid,
    postnodedrop,
    postcompleteandcreateseniorjmx,
    postseniordebugtask

  } from '../request/api.js';

import CodeEdit from '../components/codemirror.vue'
  export default {
    components: {CodeEdit},
    props: ['addId'],
    data() {

      return {
        closedebugResultDialog:false,
        debugResultDialogVisible:false,
        debugResultData:[],
        nowEditId: '',
        nowMainId: '',
        isEditTree: false,
        addNodeName: '',
        addTaskForm: {},
        treeData: [],
        AddOneDialogVisible: false,
        selectedType: '',
        selectedTypeisenable: false,
        selectedId: '',
        ishttpsampler: false,
        ishttpDefaults:false,
        value: [],
        options: [{
            value: 'http请求',
            label: 'http请求',
          },
          {
            value: '仅一次处理器',
            label: '仅一次处理器',
          },
          {
            value: 'http请求默认值',
            label: 'http请求默认值',
          },

        ]
      }
    },

    mounted: function() {
      this.getMyTree();
    },

    methods: {

      handleDrop(draggingNode, dropNode, dropType, ev) {
        var that = this
        var mydata = {
          "draggingNode": draggingNode.data,
          "dropNode": dropNode.data

        }

        postnodedrop(mydata)
          .then(function(response) {
            if (response.code == '0000') {
              that.$message.success('节点更新成功')
              that.getMyTree();
            } else {
              that.$message.error(response.msg)
              that.getMyTree();
            }

          })
          .catch(function(error) {
            console.log(error);
          });
      },
      submitFormTree() {
        var that = this
        var mydata = that.addTaskForm;
        mydata.id = that.selectedId;
        mydata.taskName = mydata.apiName;
        mydata.isCreateJmx = "false";

        postperformanceaddTask(mydata)
          .then(function(response) {
            that.$message.success('添加成功')
            that.addTaskForm = {}
          })
          .catch(function(error) {
            console.log(error);
          });

      },
      completeandcreate() {
        var that = this
        var mydata = {
          "id": that.addId,
        }
        postcompleteandcreateseniorjmx(mydata)
          .then(function(response) {
            that.$message.success('生成成功')
            that.addTaskForm = {}
            that.$emit('closesenioruserTask', false);
          })
          .catch(function(error) {
            console.log(error);
          });
      },

      completeanddebug() {
        var that = this
        var mydata = {
          "id": that.addId,
        }

        postseniordebugtask(mydata)
          .then(function(response2) {
            that.debugResultData = response2.data;
            that.debugResultDialogVisible=true;
          })
          .catch(function(error) {
            console.log(error);
          });



      },




      selectedTypeChange(data) {
        this.addNodeName = data;

      },

      handleNodeClick(data, node, item) {
        var that = this
        that.selectedId = data.id;

        if (data.nodeType === 'http请求'||data.nodeType === 'http请求默认值') {
          that.ishttpsampler = true;
          postperformancedetailsbyid({
              'id': data.id
            })
            .then(function(response) {
              that.addTaskForm = {}
              that.addTaskForm = response.data
            })
            .catch(function(error) {
              console.log(error);
            });


        } else {

          that.ishttpsampler = false;
        }
        if (data.nodeType === 'http请求默认值') {
           that.ishttpDefaults  =true;
          }
          else{
            that.ishttpDefaults  =false;

          }



      },


      addOneConfirm() {
        var that = this;
        var mydata = {}




        if (that.isEditTree) {
          mydata = {
            id: that.nowEditId,
            mainId: that.nowMainId,
            nodeType: that.selectedType,
            nodeName: that.addNodeName
          };
        } else {
          mydata = {
            mainId: that.nowEditId,
            nodeType: that.selectedType,
            nodeName: that.addNodeName
          };


        }


        postaddtree(mydata)
          .then(function(response) {
            that.$message.success('添加成功')
            that.getMyTree();
          })
          .catch(function(error) {
            console.log(error);
          });
        this.AddOneDialogVisible = false;
      },

      addTree(id) {
        var that = this
        that.AddOneDialogVisible = true;
        that.nowEditId = id;
        that.addNodeName = '';
        that.isEditTree = false;
        that.selectedTypeisenable = false;
      },

      editTree(data) {
        var that = this

        that.nowEditId = data.id;
        that.nowMainId = data.mainId;
        that.addNodeName = '';
        that.isEditTree = true;
        that.selectedType = data.nodeType
        that.addNodeName = data.nodeName

        if (data.nodeType === '根节点') {
          that.selectedTypeisenable = true
        } else {
          that.selectedTypeisenable = false
        }
        that.AddOneDialogVisible = true;
      },



      remove(node, data) {
        var that = this
        const mydata = {
          id: data.id,
        };
        postdeltree(mydata)
          .then(function(response) {
            that.$message.success('删除成功')
            that.getMyTree();
          })
          .catch(function(error) {
            console.log(error);
          });



      },

      handleChange(value) {
        console.log(value);
      },


      getMyTree() {


        var that = this;
        var mydata = {
          "id": that.addId,
        };
        postgettasktreebyid(mydata)
          .then(function(response) {
            that.treeData = [response.data];
          })
          .catch(function(error) {
            console.log(error);
          });
      },

    }
  };
</script>

<style>


</style>
